<template>
  <view class="tabBar-wrap">
    <view
      class="tabBar-item"
      @tap="handleClick(tab)"
      :class="{ active: active === index }"
      v-for="(tab, index) of list"
      :key="tab.name"
    >
      <image
        :src="index === active ? tab.selectedIconPath : tab.icon"
        class="tabBar-item-image"
        mode="aspectFit"
      />
      <text>{{ tab.name }}</text>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
// 隐藏原来的tabBar导航栏
uni.hideTabBar()
const list = ref([
  {
    name: '资讯',
    icon: '/static/tabs/zx.png',
    url: '/pages/index/index',
    selectedIconPath: '/static/tabs/zx_xz.png'
  },
  {
    name: '卡牌',
    icon: '/static/tabs/kp.png',
    url: '/pages/card/index',
    selectedIconPath: '/static/tabs/kp_xz.png'
  },
  {
    name: '赛事',
    icon: '/static/tabs/ss.png',
    url: '/pages/match/index',
    selectedIconPath: '/static/tabs/ss_xz.png'
  },
  {
    name: '我的',
    icon: '/static/tabs/wd.png',
    url: '/pages/my/index',
    selectedIconPath: '/static/tabs/wd_xz.png'
  }
])

const props = defineProps({
  active: {
    type: Number,
    default: 0
  }
})

const handleClick = tab => {
  uni.switchTab({
    url: tab.url
  })
}
</script>
<style lang="scss" scoped>
.tabBar-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: url('https://ucp-tcg.com:18001/mc/app/static/z_dw.png') no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom);

  // padding-bottom: constant(safe-area-inset-bottom);
  .tabBar-item {
    width: 25%;
    color: #fff;
    // color: #7D7D7D;
    font-size: 24rpx;
    letter-spacing: 2rpx;
    // text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tabBar-item-image {
      display: block;
      max-width: 80rpx;
      max-height: 80rpx;
    }

    &.active {
      color: #c9ac67;
    }
  }
}
</style>
